<template>
	<view class="pro_item">
		<scroll-view scroll-y @scrolltolower="nextPage">
			<view class="item" v-for="item in productList" @click="toNewPage('/pages/attractionsDetail/attractionsDetail?productId='+item.productId)">
				<view class="img_box">
					<image :src="item.productMasterDiagram" class="coverImg"></image>
				</view>
				<div class="text_box">
					<view class="type">{{item.productTypeName}}</view>
					<view class="tit text-ellipsis-1">{{item.productName}}</view>
					<view class="price">￥{{item.minPrice}}元起</view>
				</div>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				destinationId:'',
				productList:[],
				searchProductForm: {
					rows: 10,
					page: 1,
					orderByClause: '',
					groupByClause: ''
				},
				canNextPage:false
			}
		},
		onLoad(options) {
			let destinationId=options.destinationId;
			if(destinationId){
				this.destinationId=destinationId;
			}
		},
		onShow() {
			this.getProducts()
		},
		methods: {
			toNewPage(url) {
				uni.navigateTo({url});
			},
			//下一页
			nextPage(){
				if(canNextPage){
					let searchProductForm=this.searchProductForm;
					searchProductForm.page=searchProductForm.page+1;
					this.searchProductForm=searchProductForm;
					this.getProducts();
				}
			},
			//加载产品列表
			getProducts(){
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				let that=this;
				util.fetchPost('/api/index/productList', that.searchProductForm, function(res){					
					that.productList = res.data
					that.productList.forEach(x=>{
						if(x.productMasterDiagram) {
							x.productMasterDiagram = x.productMasterDiagram.split(',')[0]
						}
					})
					if(that.searchProductForm.page<res.totalPage){
						that.canNextPage=true;
					}
					uni.hideLoading();									
				},function(res){},false)
			}
		}
	}
</script>

<style>
	.pro_item{
		padding: 0 24upx;
	}
	.pro_item .item{
		display: flex;
		align-items: center;
		padding: 24upx 0;
	}
	.pro_item .item .img_box{
		font-size: 0;
		width: 300upx;
		height: 300upx;
	}
	.pro_item .item .text_box{
		flex: 1;
		overflow: hidden;
		margin-left: 30upx;
	}
	.pro_item .item .text_box .type{
		color: #fff;
		background: #FC5C1D;
		width: 140upx;
		height: 46upx;
		border-radius: 23upx;
		text-align: center;
		line-height: 46upx;
		font-size: 24upx;
	}
	.pro_item .item .text_box .tit{
		font-size: 28upx;
		color: #333;
		margin: 15upx 0 30upx;
	}
	.pro_item .item .text_box .price{
		font-size: 36upx;
		color: #FFC800;
	}
</style>
